<template>
	<fui-tabs :tabs="tabs" @change="changeTab" :short="false" selectedColor="#333" sliderBackground="#333" />
	<view v-if="currentTab === '待出货'" class="main-content">
		<view v-for="(food,foodIndex) in foodCombo" :key="food.orderId">
			<view class="container" v-if="food.showCancelButton">
				<view class="order-box">
					<view class="header">
						<view class="store-name">单号：{{food.orderId}}</view>
						<view class="status">待出餐</view>
					</view>
					<view class="item" v-for="(cao,caoIndex) in food.cao" :key="cao.comboId"
						@click="goxiangqingFood(food)">
						<image class="item-image" :src="cao.comboImg"></image>
						<view class="item-details">
							<view class="item-title">{{cao.comboName}}</view>
							<view class="item-options-quantity">
								<view class="item-options">{{cao.comboContain}}</view>
								<view class="item-quantity">x{{num[foodIndex][caoIndex]}}</view>
							</view>
						</view>
					</view>
					<view class="footer">
						<view class="timestamp">{{food.createTime}}</view>
						<view class="total">共{{totalNums[foodIndex]}}件商品 合计: ¥{{food.money}}</view>
					</view>
					<view class="footer">
						<view class="timestamp">手机号：{{food.userNumber}}</view>
						<view class="total">公寓：{{food.userRemark}}</view>
					</view>
					<view class="button-container">
						<button class="reorder-buttons" @click="showModal(food)">取消订单</button>
						<button class="reorder-button" @click="querendingdan(food)">确认订单</button>
					</view>
				</view>
			</view>
		</view>
		<view style="margin-top: 10px;" v-if="foodCombo.length===0 ">
			<fui-empty src="https://res.firstui.cn/static/images/component/empty/img_data_3x.png" title="暂无客户下单记录">
			</fui-empty>
		</view>
	</view>
	<view v-else-if="currentTab === '待送达'" class="main-content">
		<view style="margin-top: 20px;" v-if="daisongdaFood.length==0">
			<fui-empty src="https://res.firstui.cn/static/images/component/empty/img_data_3x.png" title="暂无取消订单记录">
			</fui-empty>
		</view>
		<view v-for="(foods,foodsIndex) in daisongdaFood" :key="foods.orderId">
			<view class="container">
				<view class="order-box">
					<view class="header">
						<view class="store-name">单号：{{foods.orderId}}</view>
						<view class="status">已出餐</view>
					</view>

					<view class="item" v-for="(caos,caosIndex) in foods.cao" :key="caos.comboId"
						@click="goxiangqingFoods(foods)">
						<image class="item-image" :src="caos.comboImg"></image>
						<view class="item-details">
							<view class="item-title">{{caos.comboName}}</view>
							<view class="item-options-quantity">
								<view class="item-options">{{caos.comboContain}}</view>
								<view class="item-quantity">x{{nums[foodsIndex][caosIndex]}}</view>
							</view>
						</view>
					</view>
					<view class="footer">
						<view class="timestamp">{{foods.createTime}}</view>
						<view class="total">共{{totalNumss[foodsIndex]}}件商品 合计: ¥{{foods.money}}</view>
					</view>
					<view class="button-container">
						<button class="reorder-button" @click="querensongda(foods)">确认送达</button>
					</view>
				</view>
			</view>
		</view>
	</view>
	<view v-else-if="currentTab === '周卡月卡'" class="main-content">

		<view style="margin: 0 10px;">

			<fui-segmented-control :values="values" @click="onSegmentChange" color="#333" height="72" radius="100"
				marginTop="32">
			</fui-segmented-control>
		</view>

		<view v-if="selectedValue === '周卡'">
			<view class="container" v-if="ZhouKa.length>0">
				<view class="order-box" v-for="(zhouka,index) in ZhouKa">
					<view class="header">
						<view class="store-name">订单编号：{{zhouka.memberId}}</view>
						<view class="status"></view>
					</view>
					<view class="item">
						<image class="item-image"
							src="https://i-blog.csdnimg.cn/direct/60ad36a86df649dcbb6d3553bf3e5e48.png"></image>
						<view class="item-details">
							<view class="item-title">{{zhouka.memberType}}</view>
							<view class="item-options-quantity">
								<view class="item-options">周卡套餐</view>
								<view class="item-quantity">x1</view>
							</view>
						</view>
					</view>
					<view class="footer">
						<view class="timestamp">
							<view class="totalOne">开始时间：{{zhouka.memberCreateTime}}</view>
						</view>
					</view>
					<view class="footer">
						<view class="timestamp">
							<view class="totalOne">结束时间：{{zhouka.memberEndTime}}</view>
						</view>

					</view>
					<view class="footer">
						<view class="timestamp">

						</view>
						<view class="button-container">
							<button class="reorder-button">周卡</button>
						</view>

					</view>
				</view>
				<view style="margin-top: 10px;" >
					<fui-button background="#333" radius="96rpx"  @click="gopeisongzhoukayueka">一键配送所有周卡月卡</fui-button>
				</view>
			</view>
			<view v-else-if="ZhouKa.length==0">
				<fui-empty src="https://zjdemo.xuande.work:8889/photo/65cfff1d2fbe4ceeac42524d021f21ff.png"
					title="暂无周卡记录" marginTop="100">
					<fui-button text="返回首页" :size="28" width="336rpx" height="84rpx" radius="100rpx" background="#fff"
						:margin="['64rpx','0']" borderColor="#333" color="#333" @click="goIndex"></fui-button>
				</fui-empty>
			</view>

		</view>
		<view v-else-if="selectedValue === '月卡'">
			<view class="container" v-if="YueKa.length>0">
				<view class="order-box" v-for="(yueka,index) in YueKa">
					<view class="header">
						<view class="store-name">订单编号：{{yueka.memberId}}</view>
						<view class="status">{{yueka.memberType}}</view>
					</view>
					<view class="item">
						<image class="item-image"
							src="https://zjdemo.xuande.work:8889/photo/29a5f6a5164c45a3a088194274296ad0.png"></image>
						<view class="item-details">
							<view class="item-title">月卡套餐</view>
							<view class="item-options-quantity">
								<view class="item-options"></view> 
						<view class="item-quantity">x1</view>
							</view>
						</view>
					</view>

					<view class="footer">
						<view class="timestamp">
							<view class="totalOne">开始时间：{{yueka.memberCreateTime}}</view>
						</view>
					</view>
					<view class="footer">
						<view class="timestamp">
							<view class="totalOne">结束时间：{{yueka.memberEndTime}}</view>
						</view>

					</view>
					<view class="footer">
						<view class="timestamp">

						</view>
					<view class="button-container">
							<button class="reorder-button">月卡</button>
						</view>

					</view>
				</view>
				
				<view style="margin-top: 10px;" >
					<fui-button background="#333" radius="96rpx"  @click="gopeisongzhoukayueka">一键配送所有周卡月卡</fui-button>
				</view>
			</view>

			<view v-else-if="YueKa.length==0">
				<fui-empty src="https://zjdemo.xuande.work:8889/photo/65cfff1d2fbe4ceeac42524d021f21ff.png"
					title="暂无月卡记录" marginTop="100">
					<fui-button text="返回首页" :size="28" width="336rpx" height="84rpx" radius="100rpx" background="#fff"
						:margin="['64rpx','0']" borderColor="#333" color="#333" @click="goIndex"></fui-button>
				</fui-empty>
			</view>


		</view>
	</view>
	<view v-if="isModalVisible" class="modal">
		<view class="modal-content">
			<view class="modal-header">
				<text>请选择退款理由</text>
			</view>
			<view class="modal-body">
				<view v-for="(bank, index) in banks" :key="index" @click="selectBank(index)" class="bank-option">
					<radio color="#333" :value="bank.name" :checked="selectedBank === bank.name" />
					<text>{{ bank.name }}</text>
				</view>
				<view class="custom-container">
					<view class="label">自定义理由</view>
					<input class="input-field" v-model="payBeiZhu" type="text" placeholder="请输入退款理由" />

				</view>

			</view>
			<view class="modal-footer">
				<button @click="hideModal" class="cancel-button">取消</button>
				<button @click="confirmSelection" class="confirm-button">确定</button>
			</view>
		</view>
	</view>
	<tabbar selectedIndex=0></tabbar>
</template>
<script setup>
	import {
		onPullDownRefresh,
		onReachBottom
	} from "@dcloudio/uni-app";
	import {
		ref
	} from 'vue';
	import {
		onShow,
		onLoad,
		onUnload
	} from '@dcloudio/uni-app';
	import {
		url
	} from '@/utils/request.js'
	const values = ref(['周卡', '月卡']);
	const selectedValue = ref('周卡');

     const YueKa = ref([])
  const ZhouKa = ref([])

	const onSegmentChange = (event) => {
		selectedValue.value = values.value[event.index];
	};



	const isModalVisible = ref(false);
	const banks = ref([{
			name: '计划有变'
		},
		{
			name: '与用户协同一致退款'
		},
		{
			name: '拍错/多拍/不喜欢'
		},
	]);
	const selectedBank = ref('');

	const quxiaodingdanId = ref('')
	const showModal = (food) => {
		quxiaodingdanId.value = food.orderId
	
		isModalVisible.value = true;
	};

	const hideModal = () => {
		isModalVisible.value = false;
	};

	const selectBank = (index) => {
		const bank = banks.value[index];
		selectedBank.value = bank.name;
	};

	const confirmSelection = () => {
		uni.request({
			url: url + '/rider/riderWithdrawOrders',
			method: 'GET',
			data: {
				orderId: quxiaodingdanId.value,
				riderRemark: selectedBank.value
			},
			success: (res) => {
				wx.showToast({
					title: '取消成功',
					icon: 'success',
					duration: 2000
				})
				fetchOrders()
			}
		});
		hideModal();
	};

	const tabs = ref(['待出货', "待送达", "周卡月卡"]);
	const currentTab = ref('待出货');
	const num = ref([])
	const totalNums = ref([])
	const nums = ref([])
	const totalNumss = ref([])
	const changeTab = (tab) => {
		currentTab.value = tabs.value[tab.index];
	};
	const daisongdaFood = ref([''])
	const foodCombo = ref([]);
	const timer = ref(null); // 定时器引用

	const querendingdan = (food) => {
		food.showCancelButton = false;
		uni.showToast({
			title: '接单成功',
			//将值设置为 success 或者直接不用写icon这个参数
			icon: 'success',
			//显示持续时间为 2秒
			duration: 2000
		})
		uni.request({
			url: url + '/rider/riderGetOrders',
			data: {
				orderId: food.orderId
			},
			success: (res) => {
			
			}
		});
	};

	const goxiangqingFood = (food) => {
		uni.navigateTo({
			url: `../qishouxiangqingOrder/qishouxiangqingOrder?food=${JSON.stringify(food)}`
		})
	
	}
	const goxiangqingFoods = (foods) => {
		uni.navigateTo({
			url: `../qishouxiangqingOrder/qishouxiangqingOrder?food=${JSON.stringify(foods)}`
		})
		
	}
	
	const fetchData = () => {
		uni.getStorage({
			key: 'openId',
			success: function(res) {
				uni.request({
					url: url + '/rider/queryMonthCard',
					method: 'GET',
					success: (res) => {
						
				  YueKa.value = res.data.data
				
					}
				});
				uni.request({
					url: url + '/rider/queryWeekCard',
					method: 'GET',
					success: (res) => {
						
				  ZhouKa.value = res.data.data
				 
					}
				});
	
			}
	
	
		})
	};
	
	const fetchOrders = () => {
		uni.request({
			url: url + '/rider/riderSelectOrders',
			success: (res) => {
				const orders = res.data.data;
				foodCombo.value = orders.map(order => ({
					...order,
					showCancelButton: true
				}));

				// 解析 num 数组并存储到 num 中
				orders.forEach(order => {
					const orderNums = order.num.split(',').map(Number);
					num.value.push(orderNums);
				});

				// 计算每个 num 数组的总数并存储到 totalNums 中
				totalNums.value = num.value.map(arr => arr.reduce((a, b) => a + b, 0));

				// console.log(res.data.data);
				// console.log(num.value);
				// console.log(totalNums.value);
			}
		});
	};
	const fetchWaitOrders = () => {
		uni.request({
			url: url + '/rider/riderSelectAllWaitOrders',
			success: (res) => {
				daisongdaFood.value = res.data.data
				res.data.data.forEach(order => {
					const orderNums = order.num.split(',').map(Number);
					nums.value.push(orderNums);
				});

				// 计算每个 num 数组的总数并存储到 totalNums 中
				totalNumss.value = nums.value.map(arr => arr.reduce((a, b) => a + b, 0));
				
			}
		});
	};
const gopeisongzhoukayueka=()=>{
	uni.request({
		url: url + '/rider/riderAllPull',
		success: (res) => {
		if(res.data.message==='会员一键送达完成'){
			uni.showModal({
				title: '提示',
				content: '会员一键送达完成',
				confirmText: '确定',
				success: function(res) {
				
				}
			})
		}
		}
	});
}
	onLoad(() => {
		// 初始加载时请求数据
		fetchOrders();
		fetchData();
		fetchWaitOrders();
	
		// 设置定时器，每隔 5 秒请求一次数据
		timer.value = setInterval(() => {
			fetchOrders();
			fetchData();
			fetchWaitOrders();
		}, 5000);
		// uni.getStorage({
		// 	key: 'openId',
		// 	success: function(res) {
		// 		uni.request({
		// 			url: url + '/foodCombo/selectMyMember',
		// 			method: 'GET',
		// 			data: {
		// 				openId: res.data
		// 			},
		// 			success: (res) => {
		// 				console.log(res.data.data)
		// 				if (res.data && res.data.data) {
		// 					memberId.value = res.data.data.memberId
		// 					userName.value = res.data.data.userName
		// 					userImg.value = res.data.data.userImg
		// 					userNumber.value = res.data.data.userNumber
		// 					userAddress.value = res.data.data.userAddress
		// 					memberType.value = res.data.data.memberType
		// 					memberCreateTime.value = res.data.data.memberCreateTime
		// 					memberEndTime.value = res.data.data.memberEndTime
		// 					endDayNum.value = res.data.data.endDayNum
		// 					todayIsGet.value = res.data.data.todayIsGet
		// 					console.log(memberType.value, "nihao")
		// 				} else {
		// 					console.log("No data found for userSelectMyNoGetOrder");
		// 				}
		// 			}
		// 		});

		// 	}


		// })

	});




	onPullDownRefresh(() => {
	
		fetchOrders();
		fetchData();
		fetchWaitOrders();
		setTimeout(() => {
		
			uni.stopPullDownRefresh();
		}, 1000);
	});

	onReachBottom(() => {
	
		fetchData();
		setTimeout(() => {
		
		}, 1000);
	});
	onUnload(() => {
		// 页面卸载时清除定时器
		if (timer.value) {
			clearInterval(timer.value);
			timer.value = null;
		}
	});

	const querensongda = (foods) => {

	
		uni.request({
			url: url + '/rider/riderPullOrders',
			method: 'GET',
			data: {
				orderId: foods.orderId
			},
			success: (res) => {
				wx.showToast({
					title: '确认送达',
					icon: 'success',
					duration: 2000
				})
				fetchWaitOrders()
			}
		});
	}
</script>


<style scoped>
	.open-modal-button {
		background-color: #FFCC00;
		color: #fff;
		border: none;
		padding: 10px 20px;
		border-radius: 5px;
		cursor: pointer;
	}





	.container {
		padding: 10px;
	}

	.order-box {
		border: 1px solid #ddd;
		border-radius: 10px;
		padding: 10px;
		background-color: #fff;
	}

	.header {
		display: flex;
		justify-content: space-between;
		align-items: center;
		margin-bottom: 10px;
	}

	.status {
		color: #333;
		font-size: 14px;
	}

	.store-name {
		font-size: 14px;
		word-spacing: 10px;
	}

	.item {
		display: flex;
		border-bottom: 1px solid #f5f5f5;
		padding-bottom: 16px;
		margin-bottom: 16px;
	}

	.item-image {
		width: 36px;
		height: 36px;
		margin-right: 16px;
		align-self: center;
	}

	.item-details {
		flex: 1;
		display: flex;
		flex-direction: column;
		justify-content: center;
	}

	.item-title {
		font-size: 16px;
		/* font-weight: bold; */
	}

	.item-options-quantity {
		display: flex;
		justify-content: space-between;
		align-items: center;
		font-size: 14px;
		color: #666;
		margin-bottom: 8px;
	}

	.item-quantity {
		color: #999;
	}

	.footer {
		display: flex;
		justify-content: space-between;
		align-items: center;

	}

	.timestamp {
		font-size: 14px;
		color: #666;
	}

	.totalOne {
		font-size: 16px;
	}

	.button-container {
		display: flex;
		justify-content: flex-end;

	}

/* 	.reorder-button {
		background-color: #333;
		color: #fff;
		border: none;
		margin-top: 10px;
		padding: 5px 38px;
		margin-right: 0px;
		border-radius: 26px;
		font-size: 14px;
	} */

	.label {
		flex: 1;
		font-size: 16px;
		color: #333;
	}

	.input-field {
		flex: 2;
		font-size: 16px;
		color: #333;
		border: none;
		outline: none;
	}

	.custom-container {
		display: flex;
		align-items: center;
		padding: 10px;
		border-bottom: 1px solid #eaeaea;
	}

	.modal {
		position: fixed;
		top: 0;
		left: 0;
		width: 100%;
		height: 100%;
		background-color: rgba(0, 0, 0, 0.5);
		display: flex;
		justify-content: center;
		align-items: center;
	}

	.modal-content {
		background-color: #fff;
		border-radius: 10px;
		width: 80%;
		padding: 20px;
	}

	.modal-header {
		text-align: center;
		font-size: 18px;
		margin-bottom: 10px;
	}

	.modal-body {
		padding: 0 10px;
	}

	.bank-option {
		display: flex;
		align-items: center;
		padding: 10px 0;
		border-bottom: 1px solid #f0f0f0;
	}

	.modal-footer {
		display: flex;
		justify-content: space-between;
		margin-top: 20px;
	}

	.cancel-button,
	.confirm-button {
		background-color: #333;
		color: #fff;
		border: none;
		padding: 5px 10px;
		border-radius: 5px;
		cursor: pointer;
		flex: 1;
		margin: 0 5px;
		text-align: center;
	}

	.button-container {
		display: flex;
		justify-content: flex-end;
		margin-top: 10px;
	}

	/* .reorder-button {
		background-color: #333;
		color: #fff;
		border: none;
		padding: 5px 20px;
		margin-right: 0px;
		border-radius: 26px;
		font-size: 14px;
	} */

	.main-content {
		padding-bottom: 100rpx;
		/* Ensure enough space for the tab bar */
	}

	.container {
		padding: 10px;
	}

	.order-box {
		border: 1px solid #ddd;
		border-radius: 10px;
		padding: 10px;
		background-color: #fff;
	}

	.header {
		display: flex;
		justify-content: space-between;
		align-items: center;
		margin-bottom: 10px;
	}

	.status {
		color: #333;
		font-size: 14px;
	}

	.store-name {
		font-size: 14px;
		word-spacing: 10px;
	}

	.item {
		display: flex;
		border-bottom: 1px solid #f5f5f5;
		padding-bottom: 16px;
		margin-bottom: 16px;
	}

	.item-image {
		width: 36px;
		height: 36px;
		margin-right: 16px;
		align-self: center;
	}

	.item-details {
		flex: 1;
		display: flex;
		flex-direction: column;
		justify-content: center;
	}

	.item-title {
		font-size: 16px;
	}

	.item-options-quantity {
		display: flex;
		justify-content: space-between;
		align-items: center;
		font-size: 14px;
		color: #666;
		margin-bottom: 8px;
	}

	.item-quantity {
		color: #999;
	}

	.footer {
		display: flex;
		justify-content: space-between;
		align-items: center;
		margin-top: 10px;
	}

	.timestamp {
		font-size: 14px;
		color: #666;
	}

	.total {
		font-size: 16px;
		font-weight: bold;
	}

	.button-container {
		display: flex;
		justify-content: flex-end;
		margin-top: 10px;
	}

	.reorder-button {
		background-color: #333;
		color: #fff;
		border: none;
		padding: 5px 20px;
		margin-right: 0px;
		border-radius: 26px;
		font-size: 14px;
	}

	.reorder-buttons {
		background-color: #999;
		color: #fff;
		border: none;
		padding: 5px 20px;
		margin-right: 0px;
		border-radius: 26px;
		font-size: 14px;
	}
</style>